<template>
  <div class="app-container home securityMap">
    <el-row :gutter="20" style="height:100%;">
      <!-- 部门树 -->
      <el-col :lg="4" :xs="24">
        <el-card shadow="hover" style="height:100%;background:#fff;">
          <span class="bt"><span class="block"></span>区域位置</span>
          <el-input
            v-model="state.deptName"
            placeholder="请输入"
            prefix-icon="Search"
            clearable
            @change="getTreeSelect" />
          <el-tree
            ref="deptTreeRef"
            icon-class="user"
            class="mt-2"
            style="width: max-content;max-height:900px;overflow: auto;"
            node-key="id"
            :data="deptOptions"
            :props="{ label: 'label', children: 'children' }"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            highlight-current
            :default-expand-all="true"
            @node-click="handleNodeClick">
            <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span> <i :class="node.icon"></i>{{ node.label }} </span>
            </span>
            </template>
          </el-tree>
        </el-card>
      </el-col>
      <el-col :lg="14" :xs="24" style="position:relative">
        <div id="map" />
        <div class="map_content">
          <div style="width:100%;border-bottom: 1px solid #DCDFE6;height:40px;line-height:40px;padding-left: 15px;">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icon-weizhi"></use>
            </svg>
            <span style="margin-left:5px;">位置：{{ state.address }}</span>
          </div>
          <div class="div_50 color14" style="height:47px;justify-content: left;margin-left: 50px;">
            <span class="video_icon"></span>
            <span>监控：</span><span>{{ state.monitorNum }}个</span>
          </div>
          <div class="div_50 color14" style="height:47px;justify-content: left;margin-left: 50px;">
            <span class="xfd_icon"></span>
            <span>消防点：</span><span>{{ state.fireFightingNum }}个</span>
          </div>
        </div>
      </el-col>
      <el-col :lg="6" :xs="24">
        <el-card shadow="hover" style="height:100%;background:#fff;">
          <span class="bt"><span class="block"></span>区域位置</span>
          <div class="right_klsb">
            <div class="div_50" style="border-bottom: 1px solid #DCDFE6;">
              <span class="jksb_icon"></span>
              <span>监控设备：</span>
              <span class="num-style" style="font-size:20px;">{{ rightObj.monitorNum }}个</span>
            </div>
            <div class="div_50" style="justify-content: space-around;">
              <span class="state-style">监控状态</span>
              <span>
              <span class="jkzt_zx_icon"></span>
              <span class="type-style">在线</span>
              <span class="num-style">{{ rightObj.monitorOnLineNum }}</span>
              <span>个</span>
              </span>
              <span>
                <span class="jkzt_lx_icon"></span>
                <span class="type-style">离线</span>
                <span class="num-style">{{ rightObj.monitorOfflineNum }}</span>
                <span class="type-style">个</span>
              </span>
            </div>
          </div>
          <div class="right_xfsb">
            <div class="div_50" style="border-bottom: 1px solid #DCDFE6;">
              <span class="xfsb_icon"></span>
              <span>消防设备：</span>
              <span class="num-style" style="font-size:20px;">{{ rightObj.fireFightingNum }}个</span>
            </div>
            <div class="div_50" style="justify-content: space-around;">
              <span class="state-style">设备状态</span>
              <span>
                <span class="jkzt_zx_icon"></span>
                <span class="type-style">在线</span>
                <span class="num-style">{{ rightObj.fireFightingOnLineNum }}</span>
                <span class="type-style">个</span>
              </span>
              <span>
              <span class="jkzt_lx_icon"></span>
              <span class="type-style">离线</span>
              <span class="num-style">{{ rightObj.fireFightingOfflineNum }}</span>
              <span>个</span>
              </span>
            </div>
          </div>
          <div class="right_gjqs">
            <div class="title">
              <span class="circleIcon"></span>
              近7日告警趋势
            </div>
            <div ref="getGjList" style="height: 200px" />
          </div>
          <div class="right_dqjg">
            <div class="title">
              <span class="circleIcon"></span>
              当前告警
            </div>
            <div class="dqjg_list">
              <div v-if="alarmRecordVoList==undefined||alarmRecordVoList==null||alarmRecordVoList.length<=0"
                   class="zwsj">
                暂无数据
              </div>
              <div v-for="item in alarmRecordVoList" class="dqjg_list-item">
                <span>告警时间：{{ item.alarmTime }}</span>
                <span>告警等级：<span v-for="item1 in alarm_grade"><span
                  v-show="item1.value==item.alarmGrade"> {{ item1.label }}</span></span></span>
                <span>告警类型： <span
                  v-for="item2 in alarm_type"
                  v-show="item2.value==item.alarmType">{{ item2.label }}</span></span>
                <span>告警位置：{{ item.alarmAddress }}</span>
                <div class="btn-list">
                <span class="ckxq_btn" @click="sellWordOrders('gjxq',item)">
                  <span class="ckxq_icon"></span>
                  <span>  查看详情</span>
                </span>
                  <span v-if="item.alarmHandleStatus==1" class="ckxq_btn" @click="sellWordOrders('pfgd',item)">
                  <span class="pfgd_icon"></span>
                  派发工单
                </span>
                  <span v-if="item.alarmHandleStatus==1" class="jcgj_btn" @click="sellWordOrders('jcgj',item)">
                  <span class="jcgj_icon"></span>
                  解除告警
                </span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--弹框界面-->
    <el-drawer
      ref="formDialogRef"
      v-model="dialog.shouAdd"
      :title="dialog.title"
      :size="dialog.width"
      append-to-body
      destroy-on-close
      @close="closeDialog">
      <el-form v-if="dialog.title=='告警详情'" ref="warnDetailRef" :rules="rules" label-width="120px">
        <el-row style="margin-bottom:10px;">
          <el-col :span="24">
            <el-steps
              v-if="alarmRecordDetailList.statusdetailList"
              :active="alarmRecordDetailList.statusdetailList.length">
              <el-step v-for="(item,index) in alarmRecordDetailList.statusdetailList">
                <template #title>
                  <span v-if="index==0">上报告警</span>
                  <span v-if="index==1">告警处置</span>
                  <span v-if="index==2">处置完成</span>
                </template>
                <template #description>
                  <div>{{ item }}</div>
                </template>
              </el-step>
            </el-steps>
          </el-col>
        </el-row>
        <div style="width:50%;float: left;">
          <el-row>
            <el-col :span="24">
              <el-form-item label="吿警编号：" prop="alarmCode">
                {{ alarmRecordDetailList.alarmCode }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="上报时间：" prop="alarmCode">
                {{ alarmRecordDetailList.alarmTime }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="告警类型：" prop="alarmCode">
                <span
                  v-for="item2 in alarm_type"
                  v-show="item2.value==alarmRecordDetailList.alarmType">{{ item2.label }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="告警事件：" prop="alarmCode">
                {{ alarmRecordDetailList.alarmDesc }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="告警位置：" prop="alarmCode">
                {{ alarmRecordDetailList.alarmAddress }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="告警设备：" prop="alarmCode">
                {{ alarmRecordDetailList.equipmentName }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="告警状态：" prop="alarmCode">
                <span
                  v-for="item2 in alarm_handle_status"
                  v-show="item2.value==alarmRecordDetailList.alarmHandleStatus">{{ item2.label }}</span>

              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="管控设施：" prop="alarmCode">
                <span v-if="alarmRecordDetailList.alarmHandleStatus==1">{{ alarmRecordDetailList.relieveReason }}</span>
                <span v-if="alarmRecordDetailList.alarmHandleStatus==2">派发工单</span>
                <span v-if="alarmRecordDetailList.alarmHandleStatus==3">已处理</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="gjtp">
          告警图片
          <el-carousel trigger="click" height="500px">
            <el-carousel-item v-for="item in alarmRecordDetailList.imgUrlList" :key="item">
              <el-image
                style="width: 500px; height: 300px"
                :src="item.url"
                :preview-src-list="[`${item.url}`]"
              ></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div style="width:100%;float: left;">
          <span class="blue-line"></span>
          <span>关联工单</span>
        </div>
        <!--  v-loading="loading" -->
        <el-table :data="alarmRecordDetailList.workOrderList" border>
          <el-table-column prop="workOrderCode" label="工单编号" align="center"></el-table-column>
          <el-table-column prop="workOrderContent" label="工单内容" align="center"></el-table-column>
          <el-table-column prop="workOrderType" label="工单类型" align="center">
            <template #default="scope">
              <dict-tag :options="work_order_type" :value="scope.row.workOrderType" />
            </template>
          </el-table-column>
          <el-table-column prop="workOrderGrade" label="工单等级" align="center">
            <template #default="scope">
              <dict-tag :options="work_order_grade" :value="scope.row.workOrderGrade" />
            </template>
          </el-table-column>
          <el-table-column prop="workOrderStatus" label="工单状态" align="center">
            <template #default="scope">
              <dict-tag :options="work_order_status" :value="scope.row.workOrderStatus" />
            </template>
          </el-table-column>
          <el-table-column
            key="workOrderAcceptorName"
            label="受理人"
            align="center"
            prop="workOrderAcceptorName"
            width="120" />
          <el-table-column label="派发时间" align="center" prop="createTime" width="160">
            <template #default="scope">
              <span>{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>

          <el-table-column label="预计完成时间" align="center" width="160">
            <template #default="scope">
              <span>{{ scope.row.planCompleteTime }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @pagination="getList"
        />
      </el-form>
      <el-form v-if="dialog.title=='布防点位'&&pointDetail.value" ref="deployaDefensePointRef" :model="pointDetail"
               :rules="rules" label-width="120px">
        <div style="width:50%;float: left;">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="布防位置：" prop="alarmCode">
                {{ pointDetail.value.parkBuildingName }} {{ pointDetail.value.parkBuildingAreaName }}
                {{ pointDetail.value.parkBuildingFloorName }} {{ pointDetail.value.parkBuildingRoomName }}
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="布防设备：" prop="alarmCode">
                {{ pointDetail.value.equipmentName }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="设备类型：" prop="alarmCode">
                {{ pointDetail.value.equipmentTypeName }}
                <!-- <span v-for="item1 in equipment_type">
                    <span v-show="item1.value==pointDetail.value.equipmentTypeId"> {{ item1.label }}</span>
                  </span> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="设备编码：" prop="alarmCode">
                {{ pointDetail.value.equipmentCode }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="设备标识码：" prop="alarmCode">
                {{ pointDetail.value.nodeId }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="运行状态：" prop="alarmCode">
              <span v-for="item1 in device_status">
                  <span v-show="item1.value==pointDetail.value.deviceStatus"> {{ item1.label }}</span>
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="关联设备：" prop="alarmCode">
                <!-- {{ pointDetail.value.defenseEquipmentName }} -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="AI算法：" prop="alarmCode">
                <!-- {{ pointDetail.value.cameraAiNameList }} -->
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="gjtp">
          <el-form-item v-if="pointDetail.value.imgUrlList" label="" prop="alarmCode">
            告警图片
            <el-carousel trigger="click" height="500px">
              <el-carousel-item v-for="item in pointDetail.value.imgUrlList" :key="item">
                <el-image
                  style="width: 500px; height: 300px"
                  :src="item.url"
                  :preview-src-list="[`${item.url}`]"
                ></el-image>
              </el-carousel-item>
            </el-carousel>
          </el-form-item>
          <VideoEasyPlayer v-if="videoList.url" :id="videoList.id" :url="videoList.url" :show-full-screen="false"
                           @error="videoError" />
        </div>
        <div style="width:100%;float: left;">
          <span class="blue-line"></span>
          <span>告警记录</span>
        </div>
        <el-table v-loading="loading" :data="alarmRecordDetailsVoList" border>
          <el-table-column label="序号" type="index" width="55" align="center" />
          <el-table-column key="alarmCode" label="告警编号" align="center" prop="alarmCode" />
          <el-table-column
            key="alarmType"
            label="告警类型"
            align="center"
            prop="alarmType"
            :show-overflow-tooltip="true">
            <template #default="scope">
              <span v-for="item2 in alarm_type" v-show="item2.value==scope.row.alarmType">{{ item2.label }}</span>
            </template>
          </el-table-column>
          <el-table-column
            key="alarmGrade"
            label="告警等级"
            align="center"
            prop="alarmGrade"
            :show-overflow-tooltip="true">
            <template #default="scope">
                <span v-for="item1 in alarm_grade">
                  <span v-show="item1.value==scope.row.alarmGrade"> {{ item1.label }}</span>
                </span>
            </template>
          </el-table-column>
          <el-table-column key="alarmAddress" label="告警位置" align="center" prop="alarmAddress"
                           :show-overflow-tooltip="true" />
          <el-table-column key="alarmHandleStatus" label="告警状态" align="center" prop="alarmHandleStatus" width="120">
            <template #default="scope">
              <span v-for="item2 in alarm_handle_status"
                    v-show="item2.value== scope.row.alarmHandleStatus">{{ item2.label }}</span>
            </template>
          </el-table-column>
          <el-table-column key="alarmTime" label="上报时间" align="center" prop="alarmTime" />
          <el-table-column label="完成时间" align="center" prop="alarmHandleTime">
            <template #default="scope">
              <span>{{ scope.row.alarmHandleTime }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total1 > 0"
          v-model:page="bkdwqueryParams.pageNum"
          v-model:limit="bkdwqueryParams.pageSize"
          :total="total1"
          @pagination="getListalarmrecord"
        />
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-if="dialog.title=='告警详情'"
            type="primary"
            @click="sellWordOrders('pfgd',alarmRecordDetailList)">派 发 工 单
          </el-button>
          <el-button
            v-if="dialog.title=='告警详情'"
            @click="sellWordOrders('jcgj',alarmRecordDetailList)">解 除 告 警
          </el-button>
        </div>
      </template>
    </el-drawer>
    <el-dialog
      v-if="dialog1.title=='派发工单'||dialog1.title=='解除告警'"
      ref="formDialog1Ref"
      v-model="dialog1.shouAdd"
      :title="dialog1.title"
      :size="dialog1.width"
      append-to-body
      destroy-on-close
      @close="cancel">

      <el-form
        v-if="dialog1.title=='派发工单'"
        ref="workOrderRef"
        :model="workOrderForm"
        :rules="rules"
        label-width="100px">
        <el-form-item label="工单类型:" prop="workOrderType">
          <el-select v-model="workOrderForm.workOrderType" placeholder="请选择">
            <el-option
              v-for="dict in work_order_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="指定受理人:" prop="workOrderAcceptor">
          <el-select v-model="workOrderForm.workOrderAcceptor" placeholder="请选择">
            <el-option
              v-for="item in workOrderAcceptorList"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="工单等级:" prop="workOrderGrade">
          <el-select v-model="workOrderForm.workOrderGrade" placeholder="请选择">
            <el-option
              v-for="dict in work_order_grade"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="位置描述:" prop="detailAddress">
          <el-input v-model="workOrderForm.detailAddress" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>

        <el-form-item label="预计完成时间:" prop="planCompleteTime">
          <el-date-picker
            v-model="workOrderForm.planCompleteTime"
            style="width: 100%"
            clearable
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择时间"
          />
        </el-form-item>

        <el-form-item label="工单详情:" prop="workOrderContent">
          <el-input
            v-model="workOrderForm.workOrderContent"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <el-form
        v-if="dialog1.title=='解除告警'"
        ref="releaseWarnRef"
        :model="releaseWarnForm"
        :rules="rules"
        label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="解除原因" prop="relieveReason">
              <el-select v-model="releaseWarnForm.relieveReason" placeholder="请选择">
                <el-option
                  v-for="dict in relieve_reason"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
              <!-- <el-input v-model="form.relieveReason" type="textarea" placeholder="请输入内容"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注说明">
              <el-input
                v-model="releaseWarnForm.remark"
                type="textarea"
                :rows="2"
                placeholder="请输入内容">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel()">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- <div id="my-map"></div> -->
    <!-- <el-dialog
      v-model="alarmObj.visible"
      title="消息提醒"
      width="500"
      align-center
      :show-close='false'
    >
      <div>
        <div><span class="label">告警时间：</span>{{alarmObj.time}}</div>
        <div><span class="label">告警类型：</span>{{alarmObj.type}}</div>
        <div><span class="label">告警等级：</span>{{alarmObj.grade}}</div>
        <div><span class="label">告警位置：</span>{{alarmObj.messages}}</div>

      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">解除告警</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">
            派发工单
          </el-button>
        </div>
      </template>
    </el-dialog> -->
  </div>
</template>

<script setup name="Index" lang="ts">
import request from '@/utils/request';
import 'ol/ol.css';
import { Map, View, Feature } from 'ol';
import olSource from 'ol/source';
import { Logo, TileSuperMapRest, FeatureService } from '@supermapgis/iclient-ol';
import GeoJSON from 'ol/format/GeoJSON.js';
import { transformExtent, fromLonLat, toLonLat } from 'ol/proj';
import TileLayer from 'ol/layer/Tile';
import mapsJson from './maps.json';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import { Circle, Point, LineString, Polygon } from 'ol/geom';
import { Style, Stroke, Fill, Icon, Text, Circle as StyleCircle } from 'ol/style';
import Cluster from 'ol/source/Cluster';
import logo from '@/assets/images/monitor.png';
import logo1 from '@/assets/logo/logo.png';
import OSM from 'ol/source/OSM';
import { Select } from 'ol/interaction';
import { click, platformModifierKeyOnly } from 'ol/events/condition';
import { DeptVO } from '@/api/system/dept/types';
import api from '@/api/system/user';
import * as echarts from 'echarts';
import { getCache } from '@/api/access/parking-lot/parking-overview';
import { UserForm, UserQuery, UserVO } from '@/api/system/user/types';
import { alarmRecordDetailsVO } from '@/api/park/park-place/types';
import { listworkorderacceptor } from '@/api/event/eventRecord';
import { distributeWorkOrders, listalarmrecord } from '@/api/workbench/alarm/alarm-record';
import { getEquipmentInfo } from '@/api/facility/equipment-info';
import VideoEasyPlayer from '@/components/VideoEasyPlayer/index.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import {
  parkTreeList,
  securityPlatParkPlaceIdDetail,
  securityPlatDetail,
  securityPlatById,
  pointDetailById,
  selectParkPlacePointByPlaceId,
  getTokenUrl
} from '@/api/park/park-place';

const {
  relieve_reason,
  alarm_grade,
  alarm_type,
  device_status,
  equipment_type,
  alarm_handle_status,
  work_order_type,
  work_order_status,
  work_order_grade
} = toRefs<any>(proxy?.useDict('relieve_reason', 'alarm_grade', 'alarm_type', 'device_status', 'equipment_type',
  'alarm_handle_status', 'work_order_type', 'work_order_status', 'work_order_grade'));
import {
  alarmRecordDetail,
  updatealarmrecord,
  editalarmRecordHandleStatus
} from '@/api/workbench/alarm/alarm-record';

const goTarget = (url: string) => {
  window.open(url, '__blank');
};

// 消息通知  --告警
import mapNoticeStore from '@/store/modules/mapNotice';

const noticeStore = storeToRefs(mapNoticeStore());
/**
 * 初始化消息通知数据
 * @returns
 */
const warnList = ref({
  alarmGrade: undefined,
  alarmGradeDesc: undefined,
  alarmTime: undefined,
  alarmType: undefined,
  alarmTypeDesc: undefined,
  alarmAddress: undefined,
  alarmRecordId: undefined
});
import { ElNotification, ElButton } from 'element-plus';

watch(
  () => JSON.stringify(noticeStore.state.value.noticesmap),
  (newValue, oldValue) => {
    console.log('监听到 noticesmap 改变', newValue);
    console.log('实时监听store', oldValue);
    console.log('Object.keys(newValue).length', Object.keys(newValue).length);
    // newValue是否为空

    if (newValue && Object.keys(newValue).length != 0) {
      const newObject = JSON.parse(newValue || '{}');
      let message = newObject.message;
      if (message) {
        warnList.value.alarmGrade = newObject.grade;
        console.log('字典123131：' + alarm_grade.value);
        console.log('字典：' + alarm_grade.value.find((item: any) => {
          return item.value == warnList.value.alarmGrade;
        }));
        warnList.value.alarmGradeDesc = alarm_grade.value.find((item: any) => {
          return item.value == warnList.value.alarmGrade;
        }).label;

        warnList.value.alarmTime = newObject.time;
        warnList.value.alarmType = newObject.type;
        warnList.value.alarmTypeDesc = alarm_type.value.find((item: any) => {
          return item.value == warnList.value.alarmType;
        }).label;
        warnList.value.alarmRecordId = newObject.alarmRecordId;
        warnList.value.alarmAddress = newObject.message;
        warnList.value.alarmAddress = newObject.message;
        nextTick(
          () => {
            ElNotification({
              title: '告警提示',
              message: h(
                'div',
                { style: 'display: flex; flex-direction: column; gap: 10px;' },
                [
                  // 告警内容部分
                  h('p', [
                    h('strong', warnList.value.alarmTypeDesc + '事件 '),
                    h(
                      'a',
                      {
                        href: '#',
                        style: 'color: #409eff; text-decoration: underline;',
                        onClick: () => sellWordOrders('gjxq', warnList.value)
                      },
                      '查看详情'
                    )
                  ]),
                  h('p', `告警时间：` + warnList.value.alarmTime),
                  h('p', `告警类型：` + warnList.value.alarmTypeDesc),
                  h('p', `告警等级：` + warnList.value.alarmGradeDesc),
                  h('p', `告警位置：` + warnList.value.alarmAddress),

                  // 按钮部分
                  h(
                    'div',
                    { style: 'display: flex; gap: 10px; justify-content: flex-end;' },
                    [
                      h(
                        ElButton,
                        {
                          onClick: () => sellWordOrders('jcgj', warnList.value)
                        },
                        '解除告警'
                      ),
                      h(
                        ElButton,
                        {
                          type: 'primary',
                          onClick: () => sellWordOrders('pfgd', warnList.value)
                        },
                        '派发工单'
                      )
                    ]
                  )
                ]
              ),
              duration: 0, // 不自动关闭
              showClose: true,
              dangerouslyUseHTMLString: false,
              customClass: 'custom-notification' // 自定义类名
            });
          }
        );
      }
    }
  }, { immediate: true });
const deptOptions = ref<DeptVO[]>([]);
const getGjList = ref();
// 定义变量内容
const state = reactive({
  currentLayer: null,
  tokenUrl: null,
  id: null,
  deptName: '',
  fireFightingNum: 0,
  monitorNum: 0,
  address: '',
  map: null,
  // 瓦片引入地址 nginx
  mapUrl: 'https://hzerodevgw.ysyec.com/iit/gis/hitf/v2p/rest/invoke/SFpFUk86SU5KQS1HSVM6Z2lzLnRpbGVpbWFnZQ==',
  feature: null,
  addPointsSource: null,
  deptId: null
});
const workOrderRef = ref<ElFormInstance>();
const releaseWarnRef = ref<ElFormInstance>();
const warnDetailRef = ref<ElFormInstance>();
const deployaDefensePointRef = ref<ElFormInstance>();
const warnRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
  visible: false,
  title: '',
  width: '600px'
});
const dialog1 = reactive<DialogOption>({
  visible: false,
  title: '',
  width: '400px'
});
const initFormData: UserForm = {
  userId: undefined,
  deptId: undefined,
  status: '0',
  remark: ''
};
const initData: PageData<UserForm, UserQuery> = {
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    status: '',
    deptId: '',
    roleId: ''
  },
  rules: {
    relieveReason: [{ required: true, message: '解除原因不能为空', trigger: 'blur' }],
    workOrderType: [
      { required: true, message: '工单类型不能为空', trigger: 'change' }
    ],
    workOrderAcceptor: [
      { required: true, message: '指定受理人不能为空', trigger: 'change' }
    ],
    workOrderGrade: [
      { required: true, message: '工单等级不能为空', trigger: 'change' }
    ],
    detailAddress: [
      { required: true, message: '位置描述不能为空', trigger: 'change' }
    ]
  }
};
const data = reactive<PageData<UserForm, UserQuery>>(initData);
const { queryParams, form, rules } = toRefs<PageData<UserForm, UserQuery>>(data);
const userList = ref<UserVO[]>();
const loading = ref(true);
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
const total = ref(0);
const total1 = ref(0);

const dialogVisible = ref(false);
const alarmRecordVoList = ref([]);
const alarmRecordDetailsVoList = ref<alarmRecordDetailsVO[]>([]);
const releaseWarnForm = ref({
  relieveReason: '',
  remark: '',
  alarmRecordId: undefined,
  alarmHandleStatus: 3
});

let workOrderForm = ref({
  eventRecordId: undefined,
  workOrderType: '',
  workOrderAcceptor: '',
  workOrderGrade: '',
  detailAddress: '',
  completeTime: '',
  workOrderContent: ''
});

let videoList = ref({});

/** 储存右侧数据**/
let rightObj = reactive({
  fireFightingNum: 0,
  fireFightingOfflineNum: 0,
  fireFightingOnLineNum: 0,
  monitorNum: 0,
  monitorOfflineNum: 0,
  monitorOnLineNum: 0,
  alarmRecordVoList: [],
  dlarmTrendVoList: []
});
let pointDetail = reactive({});
let alarmRecordDetailList = ref({});
const props = defineProps({
  equipmentId: String | Number
});
const data1 = reactive({
  bkdwqueryParams: {
    equipmentId: props.equipmentId,
    equipmentType: undefined,
    onlineStatus: undefined,
    status: undefined,
    pageNum: 1,
    pageSize: 10,
    time: undefined,
    alarmTimes: undefined,
    type: '0'
  }
});
const { bkdwqueryParams } = toRefs(data1);
/** 查询部门下拉树结构 */
const getTreeSelect = async () => {
  let param = {
    placeName: state.deptName
  };
  const res = await parkTreeList(param);
  deptOptions.value = res.data;
  let path = state.outMapUrl;
  if (deptOptions.value) {
    path = deptOptions.value[0].path;
  }
  getTokenData();
};
/** 通过条件过滤节点  */
const filterNode = (value: string, data: any) => {
  if (!value) {
    return true;
  }
  return data.label.indexOf(value) !== -1;
};
/** 节点单击事件 */
const handleNodeClick = async (data: DeptVO) => {
  console.log('qiehuan');
  console.log('qiehuan:', data);
  console.log('data.grade:', data.grade);
  state.deptId = data.id;
  state.address = data.label;
  const res = await securityPlatParkPlaceIdDetail(data.id);
  state.monitorNum = res.data.monitorNum;
  state.fireFightingNum = res.data.fireFightingNum;
  let url;
  if (data.path) {
    url = data.path;
  } else {
    proxy.$modal.msgWarning('暂无地图');
    return;
  }
  updateMap(url, data);
  getSelectParkPlacePointByPlaceId(data.id);
};
const getSelectParkPlacePointByPlaceId = async (id) => {
  const res = await selectParkPlacePointByPlaceId(id);
  console.log(res);
  getAddPointsSource();
  for (let i = 0; i < res.data.length; i++) {
    add2dPoint(res.data[i]);
  }
};
/** 搜索按钮操作 */
const handleQuery = () => {
  getTreeSelect();
};
/** 重置按钮操作 */
const resetQuery = () => {
  state.deptId = undefined;
  handleQuery();
};
/** 近7日告警趋势* */
const getGjqsList = async () => {
  const commandstatsIntance = echarts.init(getGjList.value, 'macarons');
  let data = rightObj.dlarmTrendVoList;
  let xData = [];
  let valueData = [];
  data.forEach(element => {
    valueData.push(element.num);
    xData.push(element.dayTime);
  });
  let option = {
    grid: {
      left: '5%',
      right: '5%',
      bottom: '2%',
      top: '10%',
      containLabel: true
    },
    backgroundColor: '#fff',
    textStyle: {
      fontSize: 0
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none'
      },
      formatter: function(params) {
        return String(params[0].name) +
          '<span style=\'display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)\'></span>' +
          ' : ' + params[0].value + ' <br/>';
      }
    },
    xAxis: {
      // nameTextStyle: {
      //     color: '#E5E7ED',
      //     padding: [0, 0, -10, 0],
      //     fontSize: 14,
      // },
      axisLabel: {
        color: '#999999',
        fontWeight: 400,
        fontFamily: 'SourceHanSansCN-Regular, SourceHanSansCN',
        fontSize: 13,
        interval: 0,
        rotate: 20
      },
      axisTick: {
        lineStyle: {
          color: '#0B1535',
          width: 1
        },
        show: false
      },
      splitLine: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#E5E7ED',
          width: 1,
          type: 'solid'
        },
        show: true
      },
      data: xData,
      type: 'category'
    },
    yAxis: {
      type: 'value',
      nameTextStyle: {
        color: '#999999',
        padding: [0, 0, -10, 0],
        fontSize: 14
      },
      axisLabel: {
        margin: 20,
        color: '#999999',
        fontWeight: 400,
        fontFamily: 'SourceHanSansCN-Regular, SourceHanSansCN',
        fontSize: 16
      },
      axisTick: {
        lineStyle: {
          color: '#E5E7ED',
          width: 1
        },
        show: true
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#E5E7ED',
          type: 'line'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#fff',
          width: 1,
          type: 'line'
        },
        show: false
      }
    },
    series: [
      {
        data: valueData,
        type: 'bar',
        barMaxWidth: 'auto',
        barWidth: 35,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: 'linear',
            global: false,
            colorStops: [
              {
                offset: 0,
                color: '#4AA0F6'
              },
              {
                offset: 1,
                color: '#3751FE'
              }
            ]
          }
        }

      }

    ]
  };
  commandstatsIntance.setOption(
    option
  );
  window.addEventListener('resize', () => {
    commandstatsIntance.resize();
  });
};
// 获取token
const getTokenData = async () => {
  const res = await getTokenUrl().finally(() => {
  });
  state.tokenUrl = res.data;
  initMap();
};
/**
 * 初始化2d地图
 * @returns
 */
const initMap = async (outMapUrl) => {
  state.map = new Map({
    target: 'map',
    // controls:  ol.control.defaults.defaults({ attributionOptions: { collapsed: false } })
    //     .extend([new ol.supermap.control.Logo()]),
    view: new View({
      center: [102.88247104819091, 25.00189435366888],
      zoom: 18,
      projection: 'EPSG:4326',
      multiWorld: true
    })
  });
  var layer = new TileLayer({
    source: new TileSuperMapRest({
      url: state.mapUrl,
      tileLoadFunction: function(tile, src) {
        var xhr = new XMLHttpRequest();
        xhr.responseType = 'blob';
        xhr.addEventListener('loadend', function(evt) {
          var data = this.response;
          if (data !== undefined) {
            tile.getImage().src = URL.createObjectURL(data);
          } else {
            tile.setState('error');
          }
        });
        xhr.addEventListener('error', function() {
          tile.setState('error');
        });
        xhr.open('GET', src);
        xhr.setRequestHeader('Accept', '*/*');
        xhr.setRequestHeader('H-Invoke-Path-workspaceName', 'YJWLY');
        xhr.setRequestHeader('H-Invoke-Path-mapName', 'Black_outdoor_map_cn');
        xhr.setRequestHeader('Authorization', 'bearer ' + state.tokenUrl);
        xhr.send();
      }
    }),
    projection: 'EPSG:4326'
  });
  state.currentLayer = layer;
  state.map.addLayer(state.currentLayer);
  state.map.on('click', function(evt) {
    let feature = state.map.forEachFeatureAtPixel(evt.pixel, function(feature, layerVetor) {
      return feature;
    });

    // 判断点击处是否有要素
    if (feature) { // 捕捉到要素
      let id = feature.id;
      console.log(id);
      let item = {
        fireControlEquipmentId: id
      };
      sellWordOrders('bfdw', item);
    }
  });
  // query()
};
/** 布防点位详情 */
const getEquipmentDetail = async (equipmentId) => {
  proxy?.$modal.loading('加载中，请稍后！');
  const res = await getEquipmentInfo(equipmentId).finally(() => {
    proxy?.$modal.closeLoading();
  });
  console.log(res.data, 'pointDetail!!!!');
  pointDetail.value = res.data;
  if (pointDetail.value.equipmentId) {
    getVideoUrl(pointDetail.value.equipmentId);
  } else {
    videoList.value.url = '';
    videoList.value.id = '';
  }
};
const getVideoUrl = (equipmentId) => {
  request({
    url: '/equipment/equipment-info/get-video-url/' + equipmentId,
    method: 'get',
    params: { playType: 0, playProtocol: 0 }
  }).then((videoRes) => {
    console.log('获取视频地址：', videoRes);
    if (videoRes.data && videoRes.data.media_url) {
      videoList.value.url = JSON.parse(videoRes.data.media_url).wan;
      videoList.value.id = equipmentId;
      console.log(videoList);
    }
  }).finally(() => {

  });
};
const videoError = (err) => {
  console.error('视频播放失败：', err);
};
const getListalarmrecord = async () => {
  loading.value = true;
  const res = await listalarmrecord(bkdwqueryParams.value);
  alarmRecordDetailsVoList.value = res.rows;
  loading.value = false;
  total1.value = res.total;
};

/**
 * 添加设备图标
 */
const getAddPointsSource = () => {
  if (state.addPointsSource && state.feature) { // 如果地图上feature已存在或者addPointsSource和feature已定义
    state.addPointsSource.clear();// 先移除
    state.addPointsSource.addFeature(state.feature);// 再添加
  }
  state.addPointsSource = new VectorSource({
    wrapX: false
  });
  // 创建一个矢量图层
  let addPointsLayer = new VectorLayer({
    source: state.addPointsSource
  });

  state.map.addLayer(addPointsLayer);// 添加图层到地图
};
const add2dPoint = (item) => {
  let point = [item.longitude, item.latitude];
  // 创建一个点Feature
  state.feature = new Feature(new Point([point[0], point[1]]));
  let featureStyle = new Style({
    image: new Icon(({
      src: logo, // 设置点图标的图片
      scale: 1, // 缩放比例
      anchor: [0.5, 1]// 图片中心
    }))
  });
  state.feature.id = item.equipmentId;
  state.feature.setStyle(featureStyle);// 设置点的样式
  state.addPointsSource.addFeature(state.feature);// 将Feature加到source内
};
/**
 * 删除设备图标
 */
const del2dPoint = () => {
  state.addPointsSource.removeFeature(state.feature);// 从source里移除当前点feature
  state.feature = null;
};
const updateMap = (url, data) => {
  if (state.addPointsSource && state.feature) { // 如果地图上feature已存在或者addPointsSource和feature已定义
    state.addPointsSource.clear();// 先移除
    state.addPointsSource = null;
  }
  if (state.currentLayer) {
    state.map.removeLayer(state.currentLayer);
  }
  let view = state.map.getView();
  if (url.indexOf('110.41.47.245:8090') > -1) {
    url = 'Black_outdoor_map_cn';
  }
  var layer = new TileLayer({
    source: new TileSuperMapRest({
      url: state.mapUrl,
      tileLoadFunction: function(tile, src) {
        var xhr = new XMLHttpRequest();
        xhr.responseType = 'blob';
        xhr.addEventListener('loadend', function(evt) {
          var data = this.response;
          if (data !== undefined) {
            tile.getImage().src = URL.createObjectURL(data);
          } else {
            tile.setState('error');
          }
        });
        xhr.addEventListener('error', function() {
          tile.setState('error');
        });
        xhr.open('GET', src);
        xhr.setRequestHeader('Accept', '*/*');
        xhr.setRequestHeader('H-Invoke-Path-workspaceName', 'YJWLY');
        xhr.setRequestHeader('H-Invoke-Path-mapName', url);
        xhr.setRequestHeader('Authorization', 'bearer ' + state.tokenUrl);
        xhr.send();
      }
    }),
    projection: 'EPSG:4326'
  });
  state.currentLayer = layer;
  state.map.addLayer(layer);
  if (data.grade == 1) {
    view.setMaxZoom(23);
    view.setMinZoom(18);
    view.setCenter([102.8821532, 25.00190251]);
    view.setZoom(18);
  } else if (data.grade == 4) {
    console.log('data.parkBuildingCode', data.parkBuildingCode);
    console.log(data.latitude, data.longitude);
    view.setCenter([Number(data.latitude), Number(data.longitude)]);
    if (data.parkBuildingCode == 'SF5') {
      view.setZoom(22);
    } else {
      view.setZoom(20);
    }
  }
};
/** 重置操作表单 */
const reset = () => {
  form.value = { ...initFormData };
  workOrderRef.value?.resetFields();
  releaseWarnRef.value?.resetFields();
};
const selectionId = ref();
const showDistributeWorkOrder = ref(false);
/** 点击派发工单按钮操作 */
const sellWordOrders = async (type, item) => {
  if (type == 'pfgd') {
    dialog1.shouAdd = true;
    dialog1.title = '派发工单';
    dialog1.width = '400px';
    state.id = item.alarmRecordId;
    console.log('eventRecordId', item.alarmRecordId);
    workOrderForm.value.eventRecordId = item.alarmRecordId;
    getWorkOrderAcceptorList();
  } else if (type == 'jcgj') {
    dialog1.shouAdd = true;
    dialog1.title = '解除告警';
    dialog1.width = '400px';
    state.id = item.alarmRecordId;
    releaseWarnForm.value.alarmRecordId = item.alarmRecordId;
  } else if (type == 'gjxq') {
    dialog.shouAdd = true;
    dialog.title = '告警详情';
    dialog.width = '1200px';
    state.id = item.alarmRecordId;
    getAlarmRecordDetail(state.id);
  } else if (type == 'bfdw') {
    dialog.shouAdd = true;
    dialog.title = '布防点位';
    dialog.width = '1200px';
    state.id = item.fireControlEquipmentId;
    getEquipmentDetail(state.id);
    getListalarmrecord(state.id);
  } else if (type == 'warnModal') {
    dialogVisible.value = true;
  }
};
/** 工单受理人列表 */
let workOrderAcceptorList = ref([]);
const getWorkOrderAcceptorList = async () => {
  const res = await listworkorderacceptor();
  workOrderAcceptorList.value = res.data;
};
const handleClose = () => {
  reset();
  dialogVisible.value = false;
};
/** 取消按钮 */
const cancel = () => {
  reset();
  dialog1.shouAdd = false;
};
/**
 * 关闭用户弹窗
 */
const closeDialog = () => {
  dialog.shouAdd = false;
  resetForm();
};
/**
 * 重置表单
 */
const resetForm = () => {
  form.value.id = undefined;
  form.value.status = '1';
};
/** 提交按钮 */
const submitForm = () => {
  if (dialog1.title == '派发工单') {
    workOrderRef.value?.validate(async (valid: boolean) => {
      if (valid) {
        await distributeWorkOrders(workOrderForm.value);
        proxy?.$modal.msgSuccess('操作成功');
        dialog1.shouAdd = false;
        dialogVisible.value = false;
        closeDialog();
        await getRightData();
      }
    });
  } else if (dialog1.title == '解除告警') {
    releaseWarnRef.value?.validate(async (valid: boolean) => {
      if (valid) {
        await editalarmRecordHandleStatus(releaseWarnForm.value);
        proxy?.$modal.msgSuccess('操作成功');
        dialog1.shouAdd = false;
        dialogVisible.value = false;
        closeDialog();
        await getRightData();
      }
    });
  }
};
/** 查询用户列表 */
const getList = async () => {
  loading.value = true;
  const res = await api.listUser(proxy?.addDateRange(queryParams.value, dateRange.value));
  loading.value = false;
  userList.value = res.rows;
  total.value = res.total;
};

const getRightData = async () => {
  const res = await securityPlatDetail();
  rightObj = res.data;
  console.log(rightObj, '!!!!');
  alarmRecordVoList.value = res.data.alarmRecordVoList;
  console.log(alarmRecordVoList, '!!!!');
  getGjqsList();
};
const getAlarmRecordDetail = async (id) => {
  const res = await alarmRecordDetail(id);
  alarmRecordDetailList.value = res.data;
  console.log(alarmRecordDetailList, '!!ww!!');
  total1.value = res.total;
  loading.value = false;
};
onMounted(() => {
  nextTick(() => {
    getTreeSelect();
    getRightData();
  });
});
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
}

#map {
  width: 100%;
  height: 100%;
}

#my-map {
  width: 50%;
  height: 100%;
  position: absolute;
  left: 50%;
}

.left-tree {
  width: 212px;
  height: 100%;
  background: #FFFFFF;
  border-radius: 0px 0px 0px;
  position: absolute;
  left: 0;
  top: 0;
}

.bt {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
  margin-bottom: 10px;
  display: inline-block;
}

.block {
  width: 5px;
  height: 17px;
  background: #0058F6;
  border-radius: 66px 66px 66px 66px;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

.right_klsb {
  // width: 322px;
  height: 102px;
  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #DCDFE6;
}

.right_xfsb {
  // width: 322px;
  height: 82px;
  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #DCDFE6;
  margin-top: 10px;
}

.right_gjqs {
  // width: 322px;
  height: 254px;
  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #DCDFE6;
  margin-top: 10px;
}

.right_dqjg {
  // width: 322px;
  height: calc(100% - 488px);
  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #DCDFE6;
  margin-top: 10px;
}

.blue-bg {
  width: 28px;
  height: 28px;
  background: #0058F6;
  border-radius: 108px 108px 108px 108px;
  display: inline-block;
  text-align: center;
  padding-top: 5px;
  margin-right: 5px;
}

.green-bg {
  width: 16px;
  height: 16px;
  background: #00B42A;
  border-radius: 6px 6px 6px 6px;
  display: inline-block;
  text-align: center;
  margin-right: 5px;
}

.red-bg {
  width: 16px;
  height: 16px;
  background: #F53F3F;
  border-radius: 6px 6px 6px 6px;
  display: inline-block;
  text-align: center;
  margin-right: 5px;
}

.yellow-bg {
  width: 32px;
  height: 32px;
  background: #FF8800;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin-right: 5px;
}

.state-style {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 12px;
  color: #FF7D00;
}

.type-style {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 12px;
  color: #999999;
}

.num-style {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: bold;
  font-size: 18px;
  color: #333333;
  margin-left: 5px;
}

.div_50 {
  width: 100%;
  height: 50%;
  justify-content: center;
  display: flex;
  align-items: center;
}

.title {
  height: 40px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
  padding: 10px;
}

.circleIcon {
  width: 10px;
  height: 10px;
  background: #0058F6;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.dqjg_list {
  height: calc(100vh - 580px);
  overflow: auto;
}

.dqjg_list-item {
  width: 340px;
  height: 165px;
  background: #F1F7FF;
  border-radius: 4px 4px 4px 4px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  margin-top: 10px;
  margin-left: 10px;
  padding-top: 10px;
  position: relative;
}

.dqjg_list-item > span {
  display: inline-block;
  width: 100%;
  padding: 5px 10px;
}

.btn-list {
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.ckxq_btn {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #0058F6;
  cursor: pointer;
}

.jcgj_btn {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #FF7D00;
  cursor: pointer;
}

.jg_modal {
  width: 800px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 20%;
  background: #fff077d4;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  padding: 10px;
  margin-left: -400px;
}

.gjtp {
  float: left;
  width: 450px;
  height: 250px;

}

.gjtp .el-image {
  margin-top: 10px;
}

.blue-line {
  width: 5px;
  height: 10px;
  display: inline-block;
  margin-right: 5px;
  background-color: blue;
  margin-bottom: 10px;
  vertical-align: -webkit-baseline-middle;
}

.jgti_modal .el-overlay .el-overlay-dialog .el-dialog .el-dialog__header {
  padding: 0;
}

.map_content {
  min-width: 206px;
  height: 136px;
  background: #FFFFFF;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
  border-radius: 10px 10px 10px 10px;
  position: absolute;
  right: 20px;
  top: 10px;
  padding-right: 5px;
}

.color14 {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
}

.video_icon {
  width: 32px;
  height: 36px;
  display: inline-block;
  background-image: url('/src/assets/images/mapIcon/video.png');
  vertical-align: middle;
  margin-right: 5px;
  margin-top: 3px;
}

.xfd_icon {
  width: 32px;
  height: 36px;
  display: inline-block;
  background-image: url('/src/assets/images/mapIcon/xiaofangdian.png');
  vertical-align: middle;
  margin-right: 5px;
  margin-top: 3px;
}

.jksb_icon {
  width: 28px;
  height: 28px;
  display: inline-block;
  background-image: url('/src/assets/images/mapIcon/jiankongshebei.png');
  vertical-align: middle;
  margin-right: 5px;
}

.jkzt_zx_icon {
  width: 28px;
  height: 28px;
  display: inline-block;
  background-image: url('/src/assets/images/mapIcon/zaixian.png');
  vertical-align: middle;
  margin-right: 1px;
}

.jkzt_lx_icon {
  width: 28px;
  height: 28px;
  display: inline-block;
  background-image: url('/src/assets/images/mapIcon/lixian.png');
  vertical-align: middle;
  margin-right: 1px;
}

.xfsb_icon {
  width: 28px;
  height: 28px;
  display: inline-block;
  background-image: url('/src/assets/images/mapIcon/xiaofangshebei.png');
  vertical-align: middle;
  margin-right: 5px;
}

.ckxq_icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  background-image: url('/src/assets/images/mapIcon/xiangqing.png');
  vertical-align: middle;
  margin-right: 5px;
  background-repeat: no-repeat; /* 确保背景图片不重复 */
  background-size: contain; /* 调整图片大小以适应容器 */
  background-position: center; /* 居中显示背景图片 */
}

.pfgd_icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  background-image: url('/src/assets/images/mapIcon/paifagongdan.png');
  vertical-align: middle;
  margin-right: 5px;
  background-repeat: no-repeat; /* 确保背景图片不重复 */
  background-size: contain; /* 调整图片大小以适应容器 */
  background-position: center; /* 居中显示背景图片 */
}

.jc_icon {
  width: 28px;
  height: 28px;
  display: inline-block;
  background-image: url('/src/assets/images/mapIcon/jiechu.png');
  vertical-align: middle;
  margin-right: 5px;
}
</style>

<style lang="scss">
.securityMap .user {
  background: url("/src/assets/images/mapIcon/wzk.png");
  box-sizing: border-box;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 12px;
  height: 12px;
  padding: 0;
  margin-right: 5px;
  margin-top: 5px;

}

.securityMap .el-tree-node__expand-icon {
  background: url("/src/assets/images/mapIcon/wzk.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 12px;
  height: 12px;
  transform: rotate(0deg);
  margin-right: 5px;
  padding: 0 !important;
}

.securityMap .el-tree-node__expand-icon.expanded {
  background: url("/src/assets/images/mapIcon/yzk.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 12px;
  height: 12px;
  transform: rotate(0deg);
  margin-right: 5px;
  padding: 0;
}

.securityMap .el-tree-node__content svg {
  display: none;
}

/* 添加自定义样式，让通知更接近目标样式 */
.custom-notification {
  width: 400px; /* 通知宽度 */
  padding: 20px;
}

.custom-notification p {
  margin: 0;
  line-height: 1.8;
}

.zwsj {
  height: 100%;
  width: 100%;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
}
</style>
